<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    table,
    td,
    th {
      border: 1px solid #333;
    }

    table {
      border-collapse: collapse;
    }

    td,
    th {
      line-height: 45px;
      padding: 0 20px;
    }
  </style>
</head>

<body>
  <!-- <table>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>88</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>88</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>88</td>
        </tr>
    </table> -->
</body>
<script>
  // 3.  有一个二维数组   
  // var list = [
  //     ["张三", 55, 66, 77], 
  //     ["李四", 67, 89, 90], 
  //     ["王五", 96, 50, 87],
  // ]
  // 根据二维数组  动态生成表格  

  var list = [
    ["张三", 55, 66, 77],
    ["李四", 67, 89, 90],
    ["王五", 96, 50, 87],
  ];
  // list.length 就代表数据的总条数 (tr的行数)
  // 二维数组 就代表每条数据中心的详细信息 (单元格)

  document.write("<table>");

  // 正常情况下 字符串("" , '') 不允许换行  强制换行会报错  
  // 怎么解决?
  // 1. 不允许换行 就不换行    =>缺点: 结构不清晰
  // 2. 改为多字符串拼接的形式 =>缺点:拼接起来比较麻烦
  // 3. ES6新增模板字符串(``  专门运用做字符串拼接  可以换行)  =>  缺点 IE8以及以下 不支持  

  // document.write("<tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th><th>总分</th></tr>");
  // document.write("<tr>"+
  //         "<th>姓名</th>"+
  //         "<th>语文</th>"+
  //         "<th>数学</th>"+
  //         "<th>英语</th>"+
  //         "<th>总分</th>"+
  //     "</tr>");
  document.write(`<tr>
          <th>姓名</th>
          <th>语文</th>
          <th>数学</th>
          <th>英语</th>
          <th>总分</th>
      </tr>`);

  for (var i = 0; i < list.length; i++) {
    document.write("<tr>");
    // 变相的将二维转一维
    var item = list[i]; // item = ["张三", 55, 66, 77]
    var sum = 0;
    for (var j = 0; j < item.length; j++) {
      document.write("<td>" + item[j] + "</td>");
      if (j == 0) {
        continue;
      }
      sum += item[j];
    }
    document.write("<td>" + sum + "</td>");
    document.write("<tr>");
  }
  document.write("</table>");


  // var list = [
  //     ["张三", 55, 66, 77], 
  //     ["李四", 67, 89, 90], 
  //     ["王五", 96, 50, 87],
  // ];

  // list[0][0]
</script>

</html>